import {classnames, designComponent} from "plain-design-composition";
import React from "react";
import {nav} from "@/micro/nav/nav";
import {PlIcon, $$contextmenu, PlDropdownMenu, PlDropdownOption, PlScroll} from "plain-design";
import {Tab} from "plain-micro-application";

export const MicroNavigationHead = designComponent({
    setup() {
        return () => {
            const tabs = [null, ...nav.state.tabs, null]

            const closeTab = (e: React.MouseEvent, tab: Tab) => {
                e.stopPropagation()
                nav.tab.close(tab.id)
            }

            const showMenu = (e: React.MouseEvent, tab: Tab) => {
                e.stopPropagation()
                e.preventDefault()
                $$contextmenu(e.currentTarget, () => (
                    <PlDropdownMenu>
                        <PlDropdownOption icon="el-icon-refresh" label={'刷新当前页签'} onClick={() => nav.tab.refresh(tab.id)}/>
                        <PlDropdownOption icon="el-icon-close" label={'关闭当前页签'} onClick={() => nav.tab.close(tab.id)}/>
                        <PlDropdownOption icon="el-icon-back" label={'关闭左侧页签'} onClick={() => nav.tab.closeLeft(tab.id)}/>
                        <PlDropdownOption icon="el-icon-right" label={'关闭右侧页签'} onClick={() => nav.tab.closeRight(tab.id)}/>
                        <PlDropdownOption icon="el-icon-document-delete" label={'关闭其他页签'} onClick={() => nav.tab.closeOther(tab.id)}/>
                    </PlDropdownMenu>
                ))
            }

            return (
                <div className="micro-navigation-head">
                    <PlScroll scrollX={true} scrollY={false}>
                        <div className="micro-navigation-head-item-list">
                            {tabs.map((tab, index) => (
                                <div
                                    key={index}
                                    className={classnames([
                                        'micro-navigation-head-item',
                                        {
                                            [`pl-text-primary micro-navigation-head-item-active`]: !!tab && tab.show,
                                            'micro-navigation-head-item-prev': !!tabs[index + 1] && tabs[index + 1]!.show,
                                            'micro-navigation-head-item-next': !!tabs[index - 1] && tabs[index - 1]!.show,
                                            [`flag-${index}`]: tabs[index - 1] === tab,
                                        }
                                    ])}
                                    onClick={() => !!tab && nav.tab.show(tab.id)}
                                    onContextMenu={e => !!tab && showMenu(e, tab)}
                                >
                                    {!tab ? null : <>
                                        <PlIcon icon={tab.icon}/>
                                        {tabs.length > 3 && <PlIcon
                                            icon="el-icon-close"
                                            className="navigation-head-close-button"
                                            status={'primary'}
                                            {...{onClick: (e: React.MouseEvent) => closeTab(e, tab),} as any}
                                        />}
                                        <span>{tab.title}</span>
                                    </>}
                                </div>
                            ))}
                        </div>
                    </PlScroll>
                </div>
            )
        }
    }
})

